<template>
    <div class="home">
        <!--<img alt="Vue logo" src="../assets/logo.png"/>-->
        <h1>轨迹回放</h1>
        <init-map
                ref="playbackMap"
                :process="mapFrom.process"
                :speed="mapFrom.speed"
                :speedColorFlag="mapFrom.speedColorFlag"
                @autoSetProcess="autoSetProcess"
        ></init-map>

        <el-form :inline="false" :model="mapFrom" class="map-form" label-width="80px">
            <el-form-item label="速度区分">
                <el-switch
                        v-model="mapFrom.speedColorFlag"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item label="速度">
                <el-slider v-model="mapFrom.speed" :min="100" :max="3000" :step="50"></el-slider>
            </el-form-item>
            <el-form-item label="进度">
                <el-slider v-model="mapFrom.process" @change="manualSetProcess"></el-slider>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import InitMap from "@/components/bmap/initMap.vue";

    export default {
        name: "Home",
        components: {
            InitMap
        },
        data() {
            return {
                position: {lng: 116.404, lat: 39.915},
                speedColorFlag: false,
                speed: 500,
                process: 0,
                mapFrom: {
                    speed: 500,
                    process: 0,
                    speedColorFlag: false
                }
            }
        },
        mounted() {
            console.log(this.$refs.playbackMap)
        },
        methods: {
            // 自动设置进度
            autoSetProcess(cur) {
                this.mapFrom.process = cur
            },
            // 手动设置进度
            manualSetProcess(val) {
                this.$refs.playbackMap.manualSetProcess(val);
            }
        }
    };
</script>
<style lang="scss">
    .map-form{
        width: 500px;
        margin: 0 auto
    }
</style>
